<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
		<title>智慧巴士-详细信息</title>
		<style>
			.layui-container {
				margin-top: 10px;
				height: 40px;
				line-height: 40px;
			}

			.title {
				text-align: center;
				background-color: #009F95;
			}

			.null {
				color: #fff;
			}

			.layui-card-header {
				background-color: #E4E4E4;
			}

			#allmap {
				width: 100%;
				height: 300px;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
			}
		</style>
	</head>
	<body>
		<div class="layui-container">
			<div class="layui-row" style="margin-bottom: 10px;">
				<div class="layui-col-xs1 null">
					1
				</div>
				<div class="layui-col-xs10">
					<button type="button" id="prev-btn" class="layui-btn layui-btn-sm layui-btn-primary">
						<i class="layui-icon layui-icon-left">返回</i>
					</button>
				</div>
				<div class="layui-col-xs1 null">
					1
				</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-xs1 null">
					1
				</div>
				<div class="layui-col-xs10 title">
					巴士列表
				</div>
				<div class="layui-col-xs1 null">
					1
				</div>
			</div>

			<div class="layui-row">
				<div class="layui-col-xs1 null">
					<span class="bus-id">1</span>
				</div>
				<div class="layui-col-xs10 bus-map">
					<div class="layui-card">
						<div class="layui-card-header">地图</div>
						<div class="layui-card-body">
							<div id="allmap"></div>
						</div>
					</div>

					<div class="layui-card">
						<div class="layui-card-header">站点内容</div>
						<div class="layui-card-body">
							这个地方是站点内容
						</div>
					</div>

					<div class="layui-card">
						<div class="layui-card-header">巴士信息</div>
						<div class="layui-card-body">
							<ul>
								<li>线路名称:<span id="name"></span></li>
								<li>起终点:<span id="start-end"></span></li>
								<li>运行时间:<span id="time"></span></li>
								<li>票价:￥<span id="price"></span></li>
								<li>里程:<span id="distance"></span>公里</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="layui-col-xs1 null">
					1
				</div>
			</div>
			<div class="layui-row" style="margin-top: 10px;">
				<div class="layui-col-xs1 null">
					1
				</div>
				<div class="layui-col-xs10" style="text-align: center;">
					<button type="button" id="next-btn" class="layui-btn" style="width: 60%;">下一步</button>
				</div>
				<div class="layui-col-xs1 null">
					1
				</div>
			</div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/layui/layui.js"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/common.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<!-- <script type="text/javascript" src="js/LuShu_min.js"></script> -->

		<script type="text/javascript">
			var map;
			var path2;

			function mapInit() {
				// 百度地图API功能
				map = new BMapGL.Map("allmap");
				
				// var station  = path2[parseInt(path2.length/2)];
				
				var point = new BMapGL.Point(path2[parseInt(path2.length/2)].lng, path2[parseInt(path2.length/2)].lat);
				map.centerAndZoom(point, 13);
				map.enableScrollWheelZoom();
				


				var point = [];
				for (var i = 0; i < path2.length; i++) {
					point.push(new BMapGL.Point(path2[i].lng, path2[i].lat));
				}
				var pl = new BMapGL.Polyline(point);
				var polyline = new BMapGL.Polyline(path2, {
					clip: false,
					geodesic: true,
					strokeWeight: 3,
					strokeWeight: '5', //折线的宽度，以像素为单位
					strokeOpacity: 0.9, //折线的透明度，取值范围0 - 1
					strokeColor: "#028FFB" //折线颜色
				});

				// 创建起点图标
				var startMyIcon = new BMapGL.Icon("image/markers.png", new BMapGL.Size(25, 40), {
					// 指定定位位置。  
					// 当标注显示在地图上时，其所指向的地理位置距离图标左上   
					// 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
					// 图标中央下端的尖角位置。   
					anchor: new BMapGL.Size(12.5, 40),
					// 设置图片偏移。  
					// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
					// 需要指定大图的偏移位置，此做法与css sprites技术类似。   
					imageOffset: new BMapGL.Size(200, 139) // 设置图片偏移   
				});
				startMyIcon.setImageSize(new BMapGL.Size(300, 300)); //重点重点，设置图片大小
				// 创建Marker标注，使用起点图标
				// var startPt = new BMapGL.Point(112.52375506436, 32.986415761565);
				var startPt = new BMapGL.Point(path2[0].lng,path2[0].lat);
				var startMarker = new BMapGL.Marker(startPt, {
					icon: startMyIcon
				});

				// 创建终点图标
				var endMyIcon = new BMapGL.Icon("image/markers.png", new BMapGL.Size(25, 40), {
					// 指定定位位置。  
					// 当标注显示在地图上时，其所指向的地理位置距离图标左上   
					// 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
					// 图标中央下端的尖角位置。   
					anchor: new BMapGL.Size(12.5, 40),
					// 设置图片偏移。  
					// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
					// 需要指定大图的偏移位置，此做法与css sprites技术类似。   
					imageOffset: new BMapGL.Size(225, 139) // 设置图片偏移   
				});
				endMyIcon.setImageSize(new BMapGL.Size(300, 300)); //重点重点，设置图片大小
				// 创建Marker标注，使用起点图标
				// var endPt = new BMapGL.Point(112.5898086363, 33.019809343482);
				var endPt = new BMapGL.Point(path2[path2.length-1].lng,path2[path2.length-1].lat);
				var endMarker = new BMapGL.Marker(endPt, {
					icon: endMyIcon
				});

				//创建站点
				
				// var station1 = getStationMarker(112.5722773958, 32.99780946745);
				var station1 = getStationMarker(path2[parseInt(path2.length/2)].lng, path2[parseInt(path2.length/2)].lat);
				map.addOverlay(station1);
				// 将标注添加到地图
				map.addOverlay(startMarker);
				map.addOverlay(endMarker);
				map.addOverlay(polyline);
			}

			//创建站点图标
			function getStationMarker(lng, lat) {
				// 创建终点图标
				var myIcon = new BMapGL.Icon("image/transit-exchange.png", new BMapGL.Size(21, 21), {
					// 指定定位位置。  
					// 当标注显示在地图上时，其所指向的地理位置距离图标左上   
					// 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
					// 图标中央下端的尖角位置。   
					anchor: new BMapGL.Size(10.5, 15),
					// 设置图片偏移。  
					// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
					// 需要指定大图的偏移位置，此做法与css sprites技术类似。   
					imageOffset: new BMapGL.Size(1, 54) // 设置图片偏移   
				});
				myIcon.setImageSize(new BMapGL.Size(22, 181)); //重点重点，设置图片大小
				// 创建Marker标注，使用起点图标
				var pt = new BMapGL.Point(lng, lat);
				var marker = new BMapGL.Marker(pt, {
					icon: myIcon
				});
				return marker;
			}

			function loadScript() {
				var script = document.createElement("script");
				script.src =
					"https://api.map.baidu.com/api?v=1.0&type=webgl&ak=do2yPKBE3TG2NWilpYYns6QPaYReUT2C&callback=mapInit&s=1";
				document.body.appendChild(script);
			}

			// window.onload = loadScript;
		</script>
		<!-- <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=do2yPKBE3TG2NWilpYYns6QPaYReUT2C&services=&t=20210225162129"></script> -->
		<!-- <script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js"></script> -->

		<script type="text/javascript">
			//获取地址栏参数
			function getUrlParam(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			}

			function init() {
				var id = getUrlParam("id");
				localStorage.setItem("busId",id);
				$.ajax({
					contentType: "json",
					url: baseUrl + "bus/getOneById.json",
					data: {
						id: id
					},
					success: function(data) {
						if (data.code == "200") {
							$("#name").html(data.bus.name);
							$("#start-end").html(data.bus.startPoint+"-"+data.bus.endPoint);
							$("#time").html(data.bus.time);
							$("#price").html(data.bus.price);
							$("#distance").html(data.bus.distance);
							path2 = JSON.parse(data.bus.path);
							loadScript();
						} else {
							layer.msg("获取失败!", {
								icon: 5
							});
						}
					}
				});
			}

			$(function() {
				init();
				
				$("#prev-btn").on("click", function() {
					window.location.href = "bus-list.html";
				});

				$("#next-btn").on("click", function() {
					layer.msg("下一步");
					window.location.href = "bus-order1.html";
				});
			})
		</script>
	</body>
</html>
